.input-group.components-filterinput-outer {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: $border-width solid $filterinput-border;

  .bg-inherit {
    background-color: unset;
  }
}

.form-control.components-filterinput {
  cursor: text;
  height: auto;

  box-shadow: none;
  background-clip: unset;

  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

input.components-filterinput-wrapper {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  vertical-align: middle;
}

.components-filterinput-wrapper {
  min-height: 2rem;
  margin-top: 2px;
  margin-bottom: 2px;
}

.bg-focused {
  @supports (backdrop-filter: blur(12px)) {
    background-color: rgba($bg-focused, 0.5);
  }
  @supports not (backdrop-filter: blur(12px)) {
    background-color: $bg-focused;
  }
}

.input-group.components-filterinput-outer {
  &,
  & .btn,
  & .btn > svg {
    transition: background-color 0.2s linear;
  }
}
